<!-- 汉堡按钮组件：展开/收缩菜单  -->
<template>
  <div
    class="hamburger-wrap flex-center pointer"
    @click="toggleClick"
  >
    <svg-icon icon-class="collapse" class="hamburger" :class="{'is-active': isActive }" />
  </div>
</template>

<script setup>
defineProps({
  isActive: {
    required: true,
    type: Boolean,
    default: false,
  },
});

const emit = defineEmits(["toggleClick"]);

function toggleClick() {
  emit("toggleClick");
}
</script>

<style scoped lang="scss">
.hamburger-wrap {
  padding: 0 15px;
}
.hamburger {
  width: 24px;
  height: 24px;
  vertical-align: middle;
  cursor: pointer;
  transform: scaleX(-1);
}

.hamburger.is-active {
  transform: scaleX(1);
}
</style>
